<template>
  <div style="width: 100%;display: flex;justify-content: center">
    <div style="position: relative;left: 220px;transform: rotate(-90deg)">True Label</div>
    <div>
      <div style="text-align: center">Predicted Label</div>
      <chartLine :chartOption="chartOption1"  :chartSize="chastSize1"></chartLine>
    </div>
  </div>

</template>
<script setup lang="ts">
import chartLine from 'src/components/chartLine.vue';

import {reactive} from "vue";

const chastSize1 = reactive({
  width: '600px',
  height: "400px"
})
const chartOption1 = reactive({
  animation: false,
  grid: {
    width: '500',
    height: '400',
    left: 10,
    right: 10,
    bottom: 10,
    top: 10,
    containLabel: true,
  },
  xAxis: {
    position: 'top',
    type: 'category',
    data: ['dog', 'cat', 'lion', 'pig', 'fox', 'chicken', 'duck', 'monkey'],
    splitArea: {
      show: true
    },
    color:"blue"
  },
  yAxis: {
    type: 'category',
    data: ['monkey', 'duck', 'chicken', 'fox', 'pig', 'lion', 'cat', 'dog'],
    splitArea: {
      show: true
    },
    color:"red"
  },
  visualMap: {
    calculable: true,
    orient: 'vertical',
    left: 'right',
    bottom: '100',
    color:['#1762EC','#5087EC','#A3D0FD']
  },
  series: [{
    name: '热力图',
    type: 'heatmap',
    data: [
      [0, 0, 10],
      [0, 1, 20],
      [0, 2, 30],
      [0, 3, 40],
      [0, 4, 50],
      [0, 5, 60],
      [0, 6, 70],
      [0, 7, 80],
      [1, 0, 40],
      [1, 1, 50],
      [1, 2, 60],
      [1, 3, 30],
      [1, 4, 30],
      [1, 5, 30],
      [1, 6, 30],
      [1, 7, 30],
      [2, 0, 70],
      [2, 1, 80],
      [2, 2, 90],
      [2, 3, 90],
      [2, 4, 90],
      [2, 5, 90],
      [2, 6, 90],
      [2, 7, 90],
      [3, 0, 80],
      [3, 1, 70],
      [3, 2, 60],
      [3, 3, 60],
      [3, 4, 60],
      [3, 5, 60],
      [3, 6, 60],
      [3, 7, 60],
      [3, 8, 60],
      [3, 9, 60],
      [4, 0, 50],
      [4, 1, 40],
      [4, 2, 30],
      [4, 3, 30],
      [4, 4, 30],
      [4, 5, 30],
      [4, 6, 30],
      [4, 7, 30],
      [5, 0, 20],
      [5, 1, 10],
      [5, 2, 5],
      [5, 3, 5],
      [5, 4, 5],
      [5, 5, 5],
      [5, 6, 5],
      [5, 7, 5],
      [6, 0, 9],
      [6, 1, 0],
      [6, 2, 0],
      [6, 3, 0],
      [6, 4, 0],
      [6, 5, 0],
      [6, 6, 0],
      [6, 7, 0],
      [6, 0, 9],
      [7, 0, 1],
      [7, 1, 1],
      [7, 1, 1],
      [7, 2, 2],
      [7, 3, 3],
      [7, 4, 4],
      [7, 5, 5],
      [7, 6, 6],
      [7, 7, 7],
    ],
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
  }]
})

</script>
<style scoped lang="scss">

</style>
